<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,init-scale='1.0',user-scalable='no'">
    <title>语音识别查找电影</title>
</head>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>


<body>
<h1>这是一个搜索页面</h1>
<button id="record">点击录音</button>
<h2 id="result">语音识别结果</h2>

<script type="text/javascript">
    /**
     * 绑定域名
     *  -1在接口测试号上填写js安全域名接口
     *      4bff8fcd3223.ngrok.io
     *  -2引入js文件
     *      http://res.wx.qq.com/open/js/jweixin-1.6.0.js
     *  -3通过config接口注入权限验证配置
     *
     */
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxaef8f5b3473d2556', // 必填，公众号的唯一标识
        timestamp: '<%= timestamp %>', // 必填，生成签名的时间戳
        nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
        signature: '<%= signature %>',// 必填，签名
        jsApiList: [
            'onMenuShareQQ',
            'onMenuShareQZone',
            'startRecord',
            'stopRecord',
            'translateVoice' // 语音识别
        ] // 必填，需要使用的JS接口列表(附录2中查看)
    });

    // 验证通过回调
    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        wx.checkJsApi({
            jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                console.log('验证成功~', res)
            },
            fail: function (err) {
                console.log('验证失败~', err)
            }
        });

        // 设置标位
        let isRecord = false;
        let record = document.querySelector('#record');
        //语音识别
        record.onclick = function () {
            if (!isRecord) {
                // 开始录音
                wx.startRecord();
                isRecord = true;
                $('#record').html('停止录音');
            } else {
                isRecord = false;
                $('#record').html('开始录音');

                // 结束录音
                wx.stopRecord({
                    success: function (res) {
                        // 结束录音后会自动上传微信服务器中，微信服务器会自动返回一个id给开发者使用
                        let localId = res.localId;
                        wx.translateVoice({
                            localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                //alert(res.translateResult); // 语音识别的结果
                                console.log(res)
                                $('#result').html(res.translateResult)
                            }
                        });
                    }
                });
            }
        }
        //语音识别
        /*$('#record').tap(function () {
            console.log(1)
            if(!isRecord){
                // 开始录音
                wx.startRecord();
                isRecord = true;
                $('#record').html('停止录音');
            }else{
                // 结束录音
                wx.stopRecord({
                    success: function (res) {
                        // 结束录音后会自动上传微信服务器中，微信服务器会自动返回一个id给开发者使用
                        let localId = res.localId;
                        isRecord = false;
                        $('#record').html('开始录音');

                        wx.translateVoice({
                            localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                //alert(res.translateResult); // 语音识别的结果
                                $('#result').html(res.translateResult)
                            }
                        });
                    }
                });
            }
        });*/

        // 分享到QQ（即将废弃，得在真机下运行才会出现）
        wx.onMenuShareQQ({
            title: '这是一个标题~', // 分享标题
            desc: '这是一个描述~', // 分享描述
            link: 'https://www.bootcdn.cn', // 分享链接
            imgUrl: 'icon', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

    });

    wx.error(function (err) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('验证失败~', err)
    });

</script>

</body>

</html>